<template>
	<div class="category">
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
                <BreadcrumbItem href="">系统配置</BreadcrumbItem>
			    <BreadcrumbItem href="/config/category">分类</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<Row :gutter="16" v-if="$store.getters.per.config_category_create"><ICol span="6"><Button type="primary" @click="modal=true">添加新分类</Button></ICol></Row>
		    	<Row>
		    		<ICol span="24">
		    			<Tree :data="tree" :render="renderContent" ref="tree" empty-text=""></Tree>
		    		</ICol>
		    	</Row>
		    </div>
		</div>
		<Modal v-model="modal" title="更新分类" @on-ok="ok('form')" :loading="loading" >
	        <IForm :model="form" ref="form" :label-width="100" :rules="formRule" >
		        <FormItem prop="name" label="名称">
		            <IInput v-model="form.name" size="large" placeholder="名称" />
		        </FormItem>
		    </IForm>
	    </Modal>
	</div>
</template>
<script>
	import {Row,Col,Modal,Breadcrumb,Button,Form,Input,Tree,Icon} from 'iview';

	export default{
		components:{
            Row,
            'ICol':Col,
            Button,
            Breadcrumb,
            'BreadcrumbItem' : Breadcrumb.Item,
            Modal,
            'IInput' : Input,
			'IForm' : Form,
			'FormItem' : Form.Item,
			Tree,
            Icon,
        },
        data () {
            return {
            	table:{
            		url : '/config/category/view/list',
            		header: []
            	},
                perCheck : [],
                modal : false,
                loading : true,
                form : {
                	id : 0,
                	pid : 0,
                	name : '',
                },
                formRule : {
	                name: [
	                    { required: true, message: '请填写名称', trigger: 'blur' },
	                ],
	            },
	            tree :  [],
	            buttonProps: {
                    size: 'small',
                }
            }
        },
        methods :{
        	changeLoading(){
	            this.loading = false;
	            this.$nextTick(() => {
	              this.loading = true;
	            });
	        },
	        //添加分类
        	ok(name){
        		this.$refs[name].validate(valid => {
        			if (!valid) {this.changeLoading();return false;}
        			this.Axios.Config.Category.Update(this.form)
		            .then(res =>{
                        this.changeLoading();
		            	if(!res) return false;
                        this.modal = false;
		            	this.getTree();
		            })
        		})
        	},
            //render tree
        	renderContent (h, { root, node, data }) {
                var _this = this;
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'md-list'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        !this.$store.getters.per.config_category_update ? '' :
                        h(Button, {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'md-add'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                    _this.updateCategory(data.id,data.title,data.pid);
                                }
                            }
                        },'更新'),
                        !this.$store.getters.per.config_category_create ? '' :
                        h(Button, {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'md-create'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                	_this.updateCategory(0,'',data.id);
                                }
                            }
                        },'添加子分类'),
                        !this.$store.getters.per.config_category_delete ? '' :
                        h(Button, {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'md-close'
                            }),
                            on: {
                                click: () => { 
                                	_this.removeCategory(data.id);
                                }
                            }
                        },'删除当前分类')
                    ])
                ]);
            },
            
            //获取树数据
            getTree(){
            	this.Axios.Config.Category.Tree()
	            .then(res =>{
	            	if(!res) return false;
	            	if(res.code!=0){
	                    this.$Message.error(res.msg);
	                    return false;
	                }
	                this.tree = this.formatTree(res.data);
	            })
            },
            //格式化树结构
            formatTree(data){
            	var list = [],_this=this;
                for(var i in data){
                    var obj = {};
                    if(data[i]['children']!=undefined){
                        var result = _this.formatTree(data[i]['children']);
                        obj.children = result;
                    }
                    obj.title = data[i]['title'];
                    obj.id = data[i]['id'];
                    obj.pid = data[i]['pid'];
                    obj.expand = true;
                    if(data[i]['pid']==0){
            			obj.render = function(h, { root, node, data }){
	            			return h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%'
                                }
                            }, [
                                h('span', [
                                    h(Icon, {
                                        props: {
                                            type: 'md-home'
                                        },
                                        style: {
                                            marginRight: '8px'
                                        }
                                    }),
                                    h('span', data.title)
                                ]),
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        float: 'right',
                                        marginRight: '32px'
                                    }
                                }, [
                                    !_this.$store.getters.per.config_category_update ? '' :
                                    h(Button, {
                                        props: Object.assign({}, _this.buttonProps, {
                                            icon: 'md-add'
                                        }),
                                        style: {
                                            marginRight: '8px'
                                        },
                                        on: {
                                            click: () => {
                                                _this.updateCategory(data.id,data.title,data.pid);
                                            }
                                        }
                                    },'更新'),
                                    !_this.$store.getters.per.config_category_create ? '' :
                                    h(Button, {
                                        props: Object.assign({}, _this.buttonProps, {
                                            icon: 'md-create'
                                        }),
                                        style: {
                                            marginRight: '8px'
                                        },
                                        on: {
                                            click: () => {
                                                _this.updateCategory(0,'',data.id);
                                            }
                                        }
                                    },'添加子分类'),
                                    !_this.$store.getters.per.config_category_delete ? '' :
                                    h(Button, {
                                        props: Object.assign({}, _this.buttonProps, {
                                            icon: 'md-close'
                                        }),
                                        on: {
                                            click: () => { 
                                                _this.removeCategory(data.id);
                                            }
                                        }
                                    },'删除当前分类')
                                ])
                            ]);
	            		}
            		}
            		list.push(obj);
            	}
            	return list;
            },
            //更新分类
            updateCategory(id,name,pid){
                this.form.id=id;
                this.form.name=name;
                this.form.pid=pid;
                this.modal=true; 
            },
            //删除分类
            removeCategory(id){
                this.$Modal.confirm({
                    title: '你确定要删除当前分类吗',
                    content: '分类下如有数据,删除失败,需转移到其他分类下,才能删除成功!',
                    onOk: () => {
                        this.Axios.Config.Category.Delete(id)
                        .then(res =>{
                            if(!res) return false;
                            this.getTree();
                        })
                    }
                });
            },
        },
        
        created:function(){
            this.getTree();
        },
        mounted:function(){
            this.$store.dispatch('CHANGE_ROUTE',{name:'分类',route:'/config/category',action:1,closable:true});
        },
        watch :{
        	modal(newVue,oldVue){
        		if(!newVue){
                    this.form.id = 0;
                    this.form.pid = 0;
                    this.form.name= '';
                }
        	}
        }
	}
</script>
<style>
	.category .ivu-tree ul li {
	    border:1px solid #e9eaec;
	    padding-top: 5px;
	    padding-bottom: 5px;
	}
</style>